<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="12"><div class="about" id="statistical"></div></el-col>
        <el-col :span="12"><div class="about" id="progress"></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12"><div class="about" id="inventory"></div></el-col>
        <el-col :span="12"
          ><div class="about" id="bg">
            <span>工单生产预览</span>
            <!-- 表格区域 -->
            <el-table
              stripe
              border
              ref="multipleTable"
              :data="shoporderList"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              size="mini"
            >
              <el-table-column prop="id" label="id" width="45" align="center">
              </el-table-column>
              <el-table-column
                prop="shoporder_no"
                label="工作编号"
                width="100"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="shoporder_numbers"
                label="订单数量"
                width="100"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="shoporder_item"
                label="物料编号"
                width="100"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="process_route"
                label="工艺路线"
                width="100"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column label="工单状态" width="90" align="center">
                <template #default="scope">
                  <span v-if="scope.row.shoporder_status==1">正在进行</span>
                  <span v-if="scope.row.shoporder_status==2">暂未开始</span>
                </template>
              </el-table-column>
              <el-table-column label="订单开始时间" width="130" align="center" show-overflow-tooltip>
                <template #default="scope">
                  {{ formatDate(scope.row.shoporder_start_date) }}
                </template>
              </el-table-column>
              <el-table-column label="订单结束时间" width="130" align="center" show-overflow-tooltip>
                <template #default="scope">
                  {{ formatDate(scope.row.shoporder_end_date) }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNow"
              :page-sizes="[ 5,]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rowCount"
            >
            </el-pagination></div
        ></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageCount: 1,
      pageNow: 1,
      pageSize: 5,
      rowCount: 0,
      shoporderList: [],
      statisticalList: [],
      progressList: [],
      inventoryList: [],
    };
  },
  created() {
    // 不良统计
    this.$axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      method: "post",
      url: "/IE_MES/report/getReportData.shtml",
      params: { "formMap.reportMethod": "getShopOrderAndNcData" },
    }).then((res) => {
      console.log(res.data.data);
      this.statisticalList = res.data.data;
      const noList = this.statisticalList.map((item) => {
        return item.shoporder_no;
      });
      const numList = this.statisticalList.map((item) => {
        return item.shoporder_numbers;
      });
      const ncList = this.statisticalList.map((item) => {
        return item.nc;
      });
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("statistical"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "不良统计",
          left: "center",
          textStyle: {
            fontSize: 20,
          },
        },
        tooltip: { trigger: "item" },
        legend: {
          orient: "vertical",
          left: "left",
        },
        xAxis: {
          data: noList,
          type: "category",
          axisLabel: {
            // interval: 0,
          },
        },
        yAxis: {},
        series: [
          {
            name: "工单数量",
            type: "line",
            data: numList,
          },
          {
            name: "不良数量",
            type: "line",
            data: ncList,
          },
        ],
      });
    });
    // 工单进度
    this.$axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      method: "post",
      url: "/IE_MES/report/getReportData.shtml",
      params: { "formMap.reportMethod": "getShopOrderAndCompleteData" },
    }).then((res) => {
      console.log(res.data.data);
      this.progressList = res.data.data;
      const noList = this.progressList.map((item) => {
        return item.shoporder_no;
      });
      const numList = this.progressList.map((item) => {
        return item.shoporder_numbers;
      });
      const completeList = this.progressList.map((item) => {
        return item.complete;
      });
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("progress"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "工单进度",
          left: "center",
          textStyle: {
            fontSize: 20,
          },
        },
        tooltip: { trigger: "item" },
        legend: {
          orient: "vertical",
          left: "left",
        },
        xAxis: {
          data: noList,
          type: "category",
        },
        yAxis: {},
        series: [
          {
            name: "完成数量",
            type: "bar",
            data: completeList,
          },
          {
            name: "工单数量",
            type: "bar",
            data: numList,
          },
        ],
      });
    });
    // 物料库存
    this.$axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      method: "post",
      url: "/IE_MES/report/getReportData.shtml",
      params: { "formMap.reportMethod": "getInventoryData" },
    }).then((res) => {
      console.log(res.data.data);
      this.inventoryList = res.data.data;
      const eList = this.inventoryList.map((item) => {
        return {
          name: item.item_name,
          value: item.kc,
        };
      });
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("inventory"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "物料库存",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "物料库存",
            type: "pie",
            radius: "50%",
            data: eList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    });
    this.getList();
  },
  methods: {
    getList() {
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/product_plan/shoporder_maintenance_findByPage.shtml",
        data: this.$qs.stringify({
          pageSize: this.pageSize,
          pageNow: this.pageNow,
        }),
      }).then((res) => {
        console.log(res.data);
        this.shoporderList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
    },
    formatDate(data) {
      var date = new Date(data);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },
    handleCurrentChange(newPage) {
      this.pageNow = newPage;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
#statistical {
  height: 390px;
  width: 100%;
}
#progress {
  height: 390px;
  width: 100%;
}
#inventory {
  height: 390px;
  width: 100%;
}
#bg {
  margin-top: 30px;
  height: 390px;
  width: 100%;
}
</style>